<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拉伸</title>
	</head>
	<style>
		.transi{
			width:10px;
			height:30px;
			background-color: blue;
			transition:1s;
		}
		.transi:hover{
			width:150px;	
		}
		@keyframes movebox{
			from{left: 0px;}
			to{left: 100px;}
		}
		.move{
			width:150px;
			height:150px;
			background-color:blue;
			animation:movebox 3s infinite;
			position:relative;

			background-image:url(images/qr.png);
		}
		
		.d3{
			width:290px;
			height:290px;
			animation:run 3s linear infinite;/* linear 匀速执行  infinite 循环播放 */
			position:relative;
			border-radius:200px;
			background-image:url(images/下载.png);
		}
		@keyframes run{
			from{
				transform:rotate(0deg);
			}
			to{
				transform:rotate(360deg);
			}
		}
		
		.d3:hover{
			animation-play-state:paused;
		}
		body{
			background-color:red;
		}
	</style>
	<script>
	</script>
	<body>
		<h3>盒子动画效果</h3>
		<div class="transi"></div>
		<div class="move"></div>
		<div class="d3"></div>
		
		
		<audio src="images/1.mp3" controls="controls"></audio>
		
		<!--
		<button onclick="f()">治疗</button>
		-->
		
		<video src="images/hai.mp4" controls="controls" >
			
		</video>
		
		
	</body>
</html>
